import 'package:flutter/material.dart';

class CxContent extends StatefulWidget {
  @override
  _CxContentState createState() => _CxContentState();
}

class _CxContentState extends State<CxContent> {
  List<Map> checkList = [
    {'text': '腰间', 'active': false},
    {'text': '腋下', 'active': false},
    {'text': '前胸', 'active': false}
  ];

  List<Map> fontList = [
    {'text': '黑体', 'active': false},
    {'text': '隶书', 'active': false},
    {'text': '华文行楷', 'active': false}
  ];
  TextEditingController textController;
  @override
  void initState() {
    super.initState();
    textController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(15),
          child: Column(
            children: [
              Row(
                children: [
                  Container(
                    child: Text('刺绣区域:'),
                  ),
                  Container(
                    child: Row(
                      children: checkList
                          .map((item) => Row(
                                children: [
                                  Checkbox(
                                    value: item['active'],
                                    onChanged: (value) {
                                      setState(() {
                                        for (Map i in checkList) {
                                          if (i['text'] == item['text']) {
                                            i['active'] = true;
                                          } else {
                                            i['active'] = false;
                                          }
                                        }
                                      });
                                    },
                                    activeColor: Colors.black,
                                  ),
                                  Container(
                                    child: Text(item['text']),
                                  )
                                ],
                              ))
                          .toList(),
                    ),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    child: Text('区域价格:'),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 15),
                    child: Text(
                      '10元',
                      style: TextStyle(color: Color.fromRGBO(153, 153, 153, 1)),
                    ),
                  )
                ],
              ),
              Row(
                children: [
                  Container(
                    child: Text('选择字体:'),
                  ),
                  Row(
                    children: fontList
                        .map((item) => Container(
                              margin: EdgeInsets.only(left: 15),
                              child: ElevatedButton(
                                onPressed: () {
                                  setState(() {
                                    for (Map i in fontList) {
                                      if (i['text'] == item['text']) {
                                        i['active'] = true;
                                      } else {
                                        i['active'] = false;
                                      }
                                    }
                                  });
                                },
                                child: Text(
                                  item['text'],
                                  style: TextStyle(
                                      color: item['active']
                                          ? Colors.white
                                          : Colors.black),
                                ),
                                // style: ElevatedButton.styleFrom(
                                //     backgroundColor: item['active']
                                //         ? Colors.black
                                //         : Color.fromRGBO(242, 242, 242, 1)),
                              ),
                            ))
                        .toList(),
                  )
                ],
              ),
              Container(
                height: 48,
                margin: EdgeInsets.only(top: 15),
                padding: EdgeInsets.only(left: 10),
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    border: Border.all(
                        color: Color.fromRGBO(225, 225, 225, 1), width: 1),
                    borderRadius: BorderRadius.circular(5)),
                child: TextField(
                  controller: textController,
                  decoration: InputDecoration(
                    isCollapsed: true,
                    hintText: '请输入个性签名',
                    hintStyle:
                        TextStyle(color: Color.fromRGBO(225, 225, 225, 1)),
                    border: InputBorder.none,
                  ),
                ),
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                alignment: Alignment.centerLeft,
                child: Text(
                  '最多4个字符，包含数字、字母、数字',
                  style: TextStyle(
                      color: Color.fromRGBO(225, 225, 225, 1), fontSize: 12),
                ),
              )
            ],
          ),
        ),
        //底部按鈕
        Container(
          height: 50,
          decoration: BoxDecoration(
              border: Border(
                  top: BorderSide(
                      color: Color.fromRGBO(225, 225, 225, 1), width: 0.5))),
          child: Flex(
            direction: Axis.horizontal,
            children: [
              Flexible(
                child: Container(
                  padding: EdgeInsets.all(15),
                  child: Row(
                    children: [
                      Container(
                        child: Text(
                          '合计：',
                          style: TextStyle(
                              color: Color.fromRGBO(153, 153, 153, 1)),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 5),
                        child: Text(
                          '￥50',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 17),
                        ),
                      )
                    ],
                  ),
                ),
                flex: 1,
              ),
              Flexible(
                child: Container(
                  alignment: Alignment.center,
                  color: Colors.black,
                  child: Text(
                    '确认刺绣',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                flex: 1,
              )
            ],
          ),
        ),
      ],
    );
  }
}
